<template>
  <div>

    <div style="height: 530px;">
    <el-scrollbar style="height: 100%;">
      <el-row>

        <el-col v-for="pointParam in pointParams" :key="pointParam.index" :span="8">
          <el-card :body-style="{ padding: '10px' }" style="margin: 10px;" >
            <el-row>
              <el-col :span="7">
                <el-card :body-style="{ padding: '2px' }" style="width: 86px;height: 86px;" >
                  <img v-if="pointParam.paramInfo.pic == null || pointParam.paramInfo.pic == ''" :src="factorUrl" class="image" style="width: 80px;height: 80px;">
                  <img v-else :src="pointParam.paramInfo.pic" class="image" style="width: 80px;height: 80px;">
                </el-card>
              </el-col>
              <el-col :span="12">
                <div style="line-height: 86px;font-size: 16px;">{{pointParam.paramInfo.name}}</div>
              </el-col>
              <el-col :span="5">
                <div style="line-height: 86px;"><el-button
                  size="mini"
                  type="primary"
                  @click="setCrol(pointParam)"
                ><span style="font-size: 16px;">设置</span></el-button></div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>

      </el-row>
    </el-scrollbar>
    </div>

  </div>
</template>

<script>
  import { queryCrolParam } from "@/api/basic/pointParam";
  import { crolParam } from "@/api/basic/collectPoint";

export default {
  components: {  },
  props: {
    collectPoint: {
      type: Object
    }
  },
  data() {
    return {
      factorUrl:require('@/assets/image/factor.jpeg'),
      pointParams:[],
      queryParams: {
        pointId: this.collectPoint.id
      },
      crolParams:{
        pointId: this.collectPoint.id,
        mn:this.collectPoint.mn,
        dpParamId:null,
        value:1,
      },
    };
  },
  watch:{
    collectPoint(val) {
      this.crolParams.pointId = this.collectPoint.id;
      this.crolParams.mn = this.collectPoint.mn;
      this.queryParams.pointId = this.collectPoint.id;
      this.getCrolParam();
    }
  },
  created() {
    this.getCrolParam();
  },
  methods: {
    getCrolParam(){
      let that = this;
      this.pointParams = []
      queryCrolParam(this.queryParams).then(response => {
        this.pointParams = response.data;
      });
    },
    setCrol(pointParam){
      this.crolParams.dpParamId = pointParam.dpParamId;
      // crolParam(this.crolParams).then(response => {
      //   this.msgSuccess(response.data.msg)
      // });
      let _this = this;
      this.$confirm('是否确定控制设备?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return crolParam(this.crolParams);
      }).then(response => {
        this.msgSuccess(response.data.msg)
      }).catch(function() {});

    },
  }
};
</script>
<style scoped lang="scss">
  ::v-deep{
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
</style>

